<template>
  <div
    class="scroller"
    :style="{ height: `${height}px` }"
  >
    <div
      class="u-container"
      :style="containerStyle"
    >
      <slot
        :currentList="currentList"
        :height="height"
      ></slot>
    </div>
  </div>
</template>

<script setup name="scroller">
import { computed } from 'vue'
import useTween from './useTween'

const { currentList, height, move, start, pause, resume, removeCurrent } = useTween()

const containerStyle = computed(() => {
  return {
    transform: `translateY(${-move.value}px)`
  }
})

defineExpose({
  start,
  removeCurrent,
  pause,
  resume
})
</script>

<style lang="scss" scoped>
.scroller {
  overflow: hidden;

  .u-container {
    min-height: 100%;
  }
}</style>
